<!-- eslint-disable vue/no-mutating-props -->
<!--
 * @Author: C.
 * @Date: 2023-12-12 15:57:20
-->
<template>
  <view class="m-form-item-wrapper">
    <TnFormItem
      :label="schema.label"
      :prop="schema.field"
      :required="schema.required"
    >
      <component
        :is="componentMap.get(schema.component)"
        v-model="props.formModel[props.schema.field]"
        :set-form-model="setFormModel"
        v-bind="getBindProps"
      />
    </TnFormItem>
  </view>
</template>
<script lang="ts" setup>
// ----------------------------- 第三方引入 -----------------------------
import { computed, ref, watch } from 'vue'

// ----------------------------- hooks -----------------------------

// ----------------------------- 组件 -----------------------------
import TnFormItem from '@tuniao/tnui-vue3-uniapp/components/form/src/form-item.vue'
// ----------------------------- 其他引入 -----------------------------
import { componentMap } from '../componentMap'
const props = defineProps({
  schema: {
    type: Object,
    default: () => ({}),
  },
  formModel: {
    type: Object as PropType<Recordable>,
    default: () => ({}),
  },
  setFormModel: {
    type: Function as PropType<(key: string, value: any) => void>,
    default: null,
  },
})
// const emits = defineEmits([])
//----------------------------- 变量声明区 -----------------------------
const getBindProps = computed(() => {
  return {
    ...props.schema.componentProps,
  }
})
// ----------------------------- hooks使用区 -----------------------------

// ----------------------------- 钩子函数区 -----------------------------
//  ----------------------------- 自定义方法区 -----------------------------
</script>
<style lang="scss" scoped>
.m-form-item-wrapper {
  background-color: #fff;
  padding: 20rpx 15rpx 0rpx 15rpx;
  border-bottom: 1rpx solid #eee;
}
::v-deep {
  .tn-input--input {
    border: none;
    padding: 0rpx 15rpx;
    height: 50rpx;
  }
  .tn-form-item__label {
    color: #858585;
    font-weight: bold;
  }
  .tn-form-item__content {
    margin-top: 10rpx;
  }
}
</style>
